<template>
  <div class="Music">
    <ul>
      <li
        v-for="(item, index) in info"
        :key="index"
        :class="{ active: index == currendId }"
        @mouseenter="change(index)"
        @mouseleave="likai(index)"
      >
        <a href="#"> <img :src="item.imgs" /></a>
        <a href="#" style="color: black">
          <el-link :underline="false" style="margin-top: 7px">{{
            item.name
          }}</el-link>
        </a>

        <a href="#">
          <transition name="fade">
            <img
              class="bofang"
              src="../assets/yunhang.png"
              alt=""
              v-show="index == active"
            />
          </transition>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Music",
  data() {
    return {
      info: [
        {
          name: "网易云超好听热门歌曲推荐",
          imgs: require("../assets/img2/1.png"),
        },
        {
          name: "遗憾吧，努力了这么久什么都没有",
          imgs: require("../assets/img2/2.png"),
        },
        { name: "一个射手座的听歌列表", imgs: require("../assets/img2/3.png") },
        {
          name: "2021全网最火超好听热门歌曲",
          imgs: require("../assets/img2/4.png"),
        },
        {
          name: "说分手的是我，念念不忘的还是我",
          imgs: require("../assets/img2/5.png"),
        },
        { name: "Rap的正确打开方式", imgs: require("../assets/img2/6.png") },
        {
          name: "想和你一起微醺暧昧｜沦陷于此",
          imgs: require("../assets/img2/7.png"),
        },
        {
          name: "花即使不被欣赏依然长大",
          imgs: require("../assets/img2/8.png"),
        },
      ],
      currendId: "",
      active: -1,
    };
  },
  methods: {
    change(index) {
      this.active = index;
    },
    likai(index) {
      this.active = -1;
    },
  },
};
</script>

<style scoped>
img {
  width: 140px;
}
ul {
  width: 100%;
  height: 450px;
}
li {
  position: relative;
  float: left;
  width: 140px;
  margin: 15px 20px;
}
span {
  display: block;
  font-size: 14px;
}
.xindie {
  color: #333333;
  font-size: 22px;
}
.bofang {
  width: 32px;
  position: absolute;
  top: 105px;
  right: 1px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
